<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <h:body>
        <ui:composition template="./WEB-INF/template.xhtml">

            <ui:define name="title">
                <h:outputText value="Iniciar Sesión | SUBWAY.com"/>
            </ui:define>

            <ui:define name="content">
                <p:growl id="growl" />
                <h:form>
                    <div id="login">
                        <div id="div-login">
                            <h:panelGrid columns="1" cellpadding="3">
                                <h:outputLabel for="usuario" value="Usuario: * "/>  
                                <p:inputText id="usuario" value="#{loginBean.usuario}" required="true" requiredMessage="*Debe ingresar su usuario" style="width: 90px"/>
                                <h:outputLabel for="clave" value="Clave: * " />  
                                <p:password value="#{loginBean.pass}" id="clave" required="true" requiredMessage="*Debe ingresar su contraseña" style="width: 90px"/>  
                                <f:facet name="footer">
                                    <p:commandButton action="#{loginBean.login}" value="Entrar" update=":growl" oncomplete="handleLoginRequest(xhr, status, args)"/>
                                </f:facet>
                            </h:panelGrid>


                            <script type="text/javascript">  
                                function handleLoginRequest(xhr, status, args) {  
                                    if(args.validationFailed || !args.loggedIn) {  
                                        jQuery('#div-login').effect("shake", { times:3 }, 60);  
                                    } else {  
                                        dlg.hide();  
                                        jQuery('#div-login').fadeOut();  
                                    }  
                                }  
                            </script>
                        </div><!-- end of div-login -->
                    </div><!-- end of login -->
                </h:form>
                <div class="cleaner_h5"></div><!-- end of cleaner_h5 -->
            </ui:define>
        </ui:composition>

    </h:body>
</html>
